<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/together.css" />
		<link rel="stylesheet" type="text/css" href="../css/indexcss.css" />
		<link rel="stylesheet" type="text/css" href="../css/beiyong.css"/>
		<style type="text/css">
			.title{ width:100%; height:45px; line-height:45px; padding:0 20px; background:#fff; border-bottom:1px solid #dcdcdc;}
			.discover_item{ padding:15px; background:#fff;  border-bottom:1px solid #ccc; }
			.discover_item:last-child{ border-bottom:0;}
			.headimg{ height:50px; line-height: 50px; display: flex;}
			.headimg span{  height:50px; line-height:50px; display:inline-block; padding-left:10px;}
			 .headimg img{ width:50px; display:inline-block; height:50px; border-radius:50%; }
			 .books_name{ padding:10px 0; font-size:16px; font-weight:550;} 
			 .article{ overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box; -webkit-line-clamp: 4; line-height:25px;
  -webkit-box-orient: vertical;  }
  			.articleImg img{  width:100%; height:100%; display: block;}
  			.discover_bottom span{ display:inline-block;  height:20px; line-height:20px;  vertical-align:top; }
  			.discover_bottom img{ width:20px;height:20px; line-height:20px;    display:inline-block; }
  			.bottom_right>div{ display:inline-block; vertical-align: middle;  margin-left:2%; height:20px;  line-height:20px;}
  			.bottom_right>div:first-child{ margin-left:0;}
  			.bottom_right{ text-align: right;}
  			.discover_bottom>div{ margin:15px 0 0; padding:0; display:inline-block; font-size:16px; width:49%; }
  			
  			.Audio{position: relative; width:100%;   margin: 0 auto; background:#EEEEEE; padding:5px 10px;}
  			.Audio_img{ width:20%; display:inline-block; vertical-align:middle; position:relative;}
  			.Audio_img img{  width:80%; height:80%;}
  			.articlevideo{ position:relative;}
  			.articlevideo video{ min-height:100px; }
  			.articlevideo video,.articlevideo .videosbtn{ width:95%; margin:0 auto;  display:block;}
  			.articlevideo .videosbtn{  height:100%; position:absolute; top:0;left:2.5%;}
  			.videosbtn .pay{ width:30px; height:30px; display:inline-block; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);}
  			.videosbtn .pays{ width:15px; height:15px; display:inline-block;}
  			.time{width:78%; display:inline-block; vertical-align: bottom; position:relative; }
  			.pgs{ background:#fff; top:-20px;}
  			.pgs,.pgs span{ width:100%; display: inline-block; position:absolute;  height:5px;  }
  			.pgs span{z-index: 2; }
  		
			.pgs-play,.video-play{  position: absolute;  left: 0%;  width: 0; height:5px; background-color: #4785f9; z-index: 1; }
			.pgs-play:before,.video-play:before{content:''; width:10px; border-radius: 50%; height:10px; background:#4785f9; z-index:1; position: absolute; right:-1px; top:-2px; }
			.Audio_img .icon-btn{ position: absolute; top:50%; left:0%; padding:10px 0;  text-align: center; width:80%; transform: translateY(-50%); color:#fff;}			
 			.videobottom{ position:absolute; bottom:5px;left:5px; font-size:12px; width:calc(100% - 10px); padding:0 5px; color:#fff;}
 			.videobottom .pgs{ width:55%;   bottom:0px!important; top:4px; left:35px;  }
 			.videobottom .times{ vertical-align:middle; display:inline-block; width:30%; position:absolute; right:5px; text-align:right;}
			
			video{
				width: 100%;
			}
			
			.mui-table-view .mui-table-view-cell>a{
				width: 100%;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav hbg">
			<!--
            	作者：592176224@qq.com
            	时间：2019-03-29
            	描述：
            	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            -->
		    <h1 class="mui-title">渭书</h1>
		    <a class="mui-icon mui-icon-right-nav mui-pull-right" id="addid">+</a>
            
		</header>
		<!--
        	作者：592176224@qq.com
        	时间：2019-03-23
        	描述：
		<header class="mui-bar mui-bar-nav hbg">
		    <h1 class="mui-title"></h1>
		    <div class="ic mui-icon-right-nav mui-pull-right" onclick="goadd()">+</div>
		</header>
        -->
			<!--
            	作者：592176224@qq.com
            	时间：2019-03-23
            	描述：
						<div class="hdiv m_barC ">
							<div></div>
							<div class="hdivcontent">渭书</div>
							<div class="ic mui-icon-right-nav mui-pull-right" onclick="goadd()">+</div>						
						</div>
            -->
		<div class="mui-content">
		    
		
					<div class="titles">最新发现</div>
				
							
					<div class="findContent"></div>
			
			
			<div id="forward" class="mui-popover mui-popover-action mui-popover-bottom">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" >
						<a href="#" sub_type="0">文本</a>
					</li>
					<li class="mui-table-view-cell" >
						<a href="#" sub_type="1">图片</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="#" sub_type="2">视频</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="#" sub_type="3">音频</a>
					</li>
				</ul>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a href="#forward"><b>取消</b></a>
					</li>
				</ul>
			</div> 
			
		</div>			
		<script src="../js/jquery.min.js"></script>					
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.lazyload.js"></script>
		<script src="../js/mui.lazyload.img.js"></script>
		<script src="../js/mui.enterfocus.js"></script>
		<script src="../js/req.js"></script>
		<script src="../js/util.js"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
				window.onload = function(){
					mui.init();
					//打开选择发布类型
					g("addid").addEventListener("tap",function(e){
						mui('#forward').popover('toggle',g("popover"));
						
					})
					//监听发布类型
					mui('#forward').on('tap', '.mui-popover-action li>a', function() {
							var a = this;
							var stype = parseInt($(a).attr("sub_type"))||0;
							
							mui('#forward').popover('toggle');
							console.log(stype);
							mui.openWindow({
							    url: 'release-mood.html?sub_type='+stype, 
							    id: 'release-mood',
							 });
					})
					
					circleList();
				}
		
	
				
		//获取分享列表		
		function circleList(){
			let data = {
					url: "/api/Circle/circleList",
					data: {
						access_token: acctoken() || "",
						number:'',
						page: '',
					}
				}
				ajax(data, function(res) {
					console.log("分享列表",res);
					if(res.code == 1){
						setcircleList(res.data[0].data);
					}else{
						mui.toast()
					}
				})
		}
		//设置分享列表
		function setcircleList(list){
					var str = '';
					console.log(list)
					if(list.length > 0){
						list.forEach(function(item,index){
								str += `<div class="discover_item"  onClick="gorelease(${item.id},${item.user_id})"><div class="headimgs"> 
									<img src="../images/60x60.gif" alt=""/><span>
									${item.member.nickname}
									</span></div><div class="books_name">
									${item.book.title}
									</div><div class="mui-row" >`;
								if(item.circle_music){
									// ../audio/JNYW.mp3
								   str += `<div class="mui-col-sm-12 article">${item.circle_content}</div>
											<div class="mui-col-sm-12  Audio">
										<audio id="audioTag" controls="controls" loop="loop" preload="auto">
											<source src="${item.circle_music}"></source>
										</audio>
									</div>`  
								}
								if(item.circle_video){
									//../vidoe/dmp.mp4	
									str += `<div class="mui-col-sm-12 article">${item.circle_content}</div>
											<div class="mui-col-sm-12  Audio">
										<video controls="controls" preload="auto">
											<source src="${item.circle_video}"></source>
										</video>
									</div>`  
								}
								if(item.circle_img){
									str += `<div class="mui-col-sm-8 article" onClick="gorelease(${item.id})">${item.circle_content}</div>`
									str +=`<div class="mui-col-sm-4 articleImg"><img src="${item.circle_img}" alt="" /></div>`;
								
								/*
								str += `<div class="mui-col-sm-12 article">${item.circle_content}</div>
											<div class="mui-col-sm-12  Audio">
										<div class="mui-col-sm-4 articleImg"><img src="${item.circle_img}" alt="" /></div>
									</div>`  */
								}
								/*
								else{
									 str += `<div class="mui-col-sm-8 article" onClick="gorelease(${item.id})">${item.circle_content}</div>`
									 if(item.circle_img){
									 	  str +=`<div class="mui-col-sm-4 articleImg"><img src="${item.circle_img}" alt="" /></div>`;
									 }else{
									 	 str +=`<div class="mui-col-sm-4 articlevideo">
									 	 <video src="${item.circle_video}" controls="controls" preload="auto"></video>
									 	  </div>`;
									 }
								}*/
								var createtime =  getLocalTime(parseInt(item.createtime));
									str += `</div>
									<div class="discover_bottom">
										<div class="">${createtime}</div>
										<div class=" bottom_right">
											<div onclick="deleteColl(${item.id})"> <img src="../images/coll.png" alt="" /> 
											<span> </span></div>
											<div> <img src="../images/comments.png" alt="" /> 
											<span> <span></div>
										</div></div></div>`
						})
					}else{
						
					}
					
					$('.findContent').html(str);
		}
		
		//跳转朋友圈详情
		function gorelease(id,uid){
			
			mui.openWindow({
				url: 'release.html?id=' + id+'&uid='+uid,
				id: 'release',
			});
			
		}
		
		
		//取消收藏
		function deleteColl(id){
	        		let data = {
						url:"/api/Book/book_keep_delete",
						data:{
							access_token : acctoken()||"",
							id:id
						}
					}
					ajax(data,function(res){
						if(res.code == -1){
							mui.toast(res.message);
						}
						if(res.code == 1){
							console.log(res);
							bookdetails();
							mui.toast("已取消收藏");
							
						}
					})
	    }

				
				
			</script>
		
	</body>
</html>
